<!-- 我的 -->
<template>
	<view>
		<view class="my">
			<!-- 头部 -->
			<view class="my_nav">
				<view @click="skip('/pages/my/personage')">
					<view>
						<view style="margin-right: 20rpx;">
							<u-avatar :src="userinfo.headavatar"></u-avatar>
						</view>
						<view>
							<text>{{token ? userinfo.name : '请登录'}}</text>
							<view v-if="token">
								<view>{{userinfo.account_type | filterAuth}}</view>
								<view v-if="userinfo.addr">
									{{userinfo.addr}}
								</view>
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>

				<view>
					<view>
						<text>{{userinfo.device.total}}</text>
						<text>设备</text>
					</view>
					<view>
						<text>{{userinfo.device.online}}</text>
						<text>在线</text>
					</view>
					<view>
						<text>{{userinfo.device.offline}}</text>
						<text>离线</text>
					</view>
					<view>
						<text>{{userinfo.device.fault}}</text>
						<text>故障</text>
					</view>
				</view>
			</view>

			<!-- 我的收益 -->
			<view class="my_money">
				<view class="title">
					<text>我的收益</text>
					<view @click="skip('/pages/my/earnings')">
						<text>收益明细</text>
						<u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</view>

				<view class="my_money_2" style="margin-top: 30rpx;">
					<view class="flex flex-jc-sb">
						<view class="text">累计收益金额(元)</view>
						<!-- <view @click="skip('/pages/my/withdrawal')" class="text"
							style="border: 1px solid #999999;color: #999999;padding: 2rpx 10rpx;">提 现</view> -->
					</view>
					<view>{{userinfo.income.total || 0.00}}</view>
				</view>

				<view class="my_money_3">
					<view>
						<text>昨日收益(元)</text>
						<text>{{userinfo.income.yesterday || 0.00}}</text>
					</view>
					<view>
						<text>今日收益(元)</text>
						<text>{{userinfo.income.today || 0.00}}</text>
					</view>
					<view>
						<text>上月收益(元)</text>
						<text>{{userinfo.income.last_month || 0.00}}</text>
					</view>
				</view>
			</view>

			<!-- 我的设备 -->
			<view class="my_facility">
				<view class="title">
					<text>设备订单</text>
					<view @click="changeIcon(0)">
						<text>查看全部订单</text>
						<u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</view>

				<view class="my_facility_2 flex flex-ai-c" style="margin-top: 24rpx;">
					<view v-for="(item, index) in icons" :key="index" @click="changeIcon(index)">
						<i-icon :icon="item.icon" :size="item.size" />
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<!-- 我的服务 -->
			<view class="my_service">
				<view class="title">
					<text>我的服务</text>
				</view>
				<view class="my_service_2">
					<view>
						<view>
							<view style="margin-top: 12rpx;">
								<i-icon icon="caigou" size="70rpx" />
							</view>
					
							<text>采购订单</text>
						</view>
						<view @click="skip('/pages/equipment/replenishment/order')">
							<text>查看全部订单</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
					<view>
						<view>
							<view style="margin-top: 12rpx;">
								<i-icon icon="addr" size="70rpx" />
							</view>
					
							<text>收货地址</text>
						</view>
						<view @click="skip('/pages/equipment/replenishment/address')">
							<text>查看地址</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
					<!-- <view>
						<view>
							<view style="margin-top: 12rpx;">
								<i-icon icon="setting" size="70rpx" />
							</view>

							<text>设备管理</text>
						</view>
						<view @click="skipSwitch('/pages/index/equipment')">
							<text>查看全部设备</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view> -->
					<view>
						<view>
							<view style="margin-top: 12rpx;">
								<i-icon icon="kefu" size="70rpx" />
							</view>
							<text>专属客服</text>
						</view>
						<view class="kf">
							<button type="default" open-type="contact">联系专属客服</button>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>
		<TabBar :current-page="4" />
	</view>
</template>

<script>
	import user from '@/api/user.js'
	import {
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				icons: [{
						name: '全部',
						icon: 'daifukuan',
						size: '60rpx'
					},
					{
						name: '待支付',
						icon: 'yiwancheng',
						size: '60rpx'
					},
					{
						name: '待出货',
						icon: 'daishouhuo',
						size: '60rpx'
					},
					{
						name: '已完成',
						icon: 'yiwancheng',
						size: '60rpx'
					},
					{
						name: '售后',
						icon: 'shouhou',
						size: '60rpx'
					}
				],
				userinfo: {
					income: {

					},
					device: {

					}

				},
				token: uni.getStorageSync('token')
			};
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			if(!uni.getStorageSync('token')) return
			this.getUserInfo()
		},
		filters: {
			filterAuth(v) {
				if(!v)return
				let code = v.split(",")[0]
				code = parseInt(code);
				let text = ''
				switch (code) {
					case 4:
						text = '推荐人'
						break
					case 1:
						text = '市代理商'
						break
					case 2:
						text = '区/县代理商'
						break
					case 3:
						text = '投资人'
						break
					case 5:
						text = '运维'
						break
					case 6:
						text = '团队长'
						break
					case 7:
						text = '点位租金'
						break
					case 8:
						text = '点位推荐'
						break
					case 9:
						text = '运营商'
						break
					case 10:
						text = '服务商'
						break
				}
				return text
			}
		},
		methods: {
			...mapActions({
				setUserInfo: 'setUserInfo'
			}),
			async getUserInfo() {
				const res = await user.getUserInfo()
				this.setUserInfo(res.data)
				if (res.data.addr && res.data.addr.split('/').length) {
					res.data.addr = res.data.addr.split('/')[0]
				}
				this.userinfo = res.data

			},
			onRelaunck(){
				uni.showToast({
					title: '请登录！',
					icon: 'none',
					duration: 2000,
					success: () => {
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/login/login'
							})
						},1000)
					}
				})
			},
			//type=false在小程序条件跳转tabbar
			skipSwitch(url, type = true) {
				if(!this.token) return this.onRelaunck()
				uni.switchTab({
					url: url
				})

			},
			skip(url) {
				if(!this.token) return this.onRelaunck()
				uni.navigateTo({
					url: url
				});

			},
			changeIcon(i) {
				if(!this.token) return this.onRelaunck()
				this.$store.commit('swiperCurrent', i)
				uni.switchTab({
					url: '/pages/index/orderForm',
				})

			}
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	// 默认样式
	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		margin-right: 8rpx;
		background: none;
	}

	// 边框样式
	button::after {
		border: 0;
	}

	// 点击时样式
	.button-hover {
		color: rgba(0, 0, 0, 0.6);
		background-color: #fff;
	}

	.kf {
		/deep/ uni-button::after {
			border: 0 !important;
		}

		/deep/ uni-button {
			font-size: 28rpx;
			font-weight: 300;
			color: #999999;
			padding: 0;
			margin-right: 8rpx;
			background: none;
		}
	}

	.my {

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #EEEFF0;

			&>text {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			&>view {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				image {
					width: 12rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}
			}
		}

		&>view:not(:first-child) {
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 6rpx;
		}

		&_nav {
			background-color: #FCB527;
			box-sizing: border-box;
			padding: 0 50rpx 100rpx 24rpx;

			// 头像/名字等
			&>view:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>view {
					display: flex;
					align-items: center;

					// 头像
					&>image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
					}

					// 中间文字
					&>view {
						&>text:nth-child(1) {
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #333333;
						}

						&>view:nth-child(2) {
							margin-top: 14rpx;
							display: flex;

							&>view {
								font-size: 20rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								padding: 6rpx 22rpx;
								border-radius: 22rpx;
								border: 1rpx solid #FFFFFF;

								&:not(:last-child) {
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				&>image {
					width: 12rpx;
					height: 24rpx;
				}

			}

			// 设备
			&>view:nth-child(2) {
				display: flex;
				box-sizing: border-box;
				padding: 0 102rpx;
				justify-content: space-between;
				margin-top: 30rpx;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;

					&>text:nth-child(1) {
						font-size: 50rpx;
						font-family: Avenir-Medium, Avenir;
						font-weight: 500;
						color: #333333;
					}

					&>text:nth-child(2) {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		// 我的收益
		&_money {
			margin-top: -70rpx;

			&_2 {
				display: flex;
				flex-direction: column;

				.text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				&>view:nth-child(2) {
					font-size: 55rpx;
					font-family: Avenir-Heavy, Avenir;
					font-weight: 800;
					color: #333333;
					margin: 30rpx 0;
				}
			}

			&_3 {
				display: flex;
				justify-content: space-between;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					width: calc(100% / 3);

					&:not(:last-child) {
						&::before {
							content: '';
							position: absolute;
							right: 0;
							top: 50%;
							margin-top: -30rpx;
							width: 1px;
							height: 60rpx;
							border-right: 1px solid #D8D8D8;
						}
					}

					&>text:nth-child(1) {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					&>text:nth-child(2) {
						font-size: 36rpx;
						font-family: Avenir-Heavy, Avenir;
						font-weight: 800;
						color: #F95533;
						margin-top: 30rpx;
					}
				}

			}

		}

		// 我的设备
		&_facility {
			margin-top: 20rpx;

			&_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 20rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		// 我的服务
		&_service {
			margin: 20rpx 0;
			padding: 30rpx 30rpx 0 30rpx !important;
			.my_service_2>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:not(:last-child) {
					border-bottom: 1px solid #EEEFF0;
				}

				&>view {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
				}

				&>view:nth-child(1) {
					image {
						width: 60rpx;
						height: 60rpx;
					}

					text {
						margin-left: 20rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				&>view:nth-child(2) {
					image {
						width: 12rpx;
						height: 20rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #999999;
						margin-right: 8rpx;
					}
				}


			}
		}


	}
</style>